<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默认</title>
	<style>
        html,body{
            background:transparent;
			/*background:black;*/
        }
		.hide{
			display: none;
		}
		.tk{
			/*width: 100%;*/
			width: auto;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			display: flex;
			align-items: flex-start;
			justify-content: flex-end;
			flex-direction: column;
			font-size: 1.0256410256410258rem;
		}
		.tk ul,.tk li{
			list-style: none;
			margin: 0;
			padding: 0;
			/*width: 100%;*/
		}
		.tk ul{
			border-radius:0.6837606837606838rem;
			overflow:hidden;
			background:#FFFFFF;
			padding-bottom: 1.2820512820512822rem;
			padding-top:1.2820512820512822rem;
		}
		.tk li{
			height: 2.8205128205128207rem;
			display: flex;
			align-items:center;
			justify-content:flex-start;
		}
		.tk .qiege{
			width: 1.5384615384615385rem;
			height:1.5384615384615385rem;
			overflow:hidden;
			margin-left: 1.0256410256410258rem;
		}
		.tk .show-all{
			width: 1.5384615384615385rem !important;
			height:1.5384615384615385rem !important;
			margin-left: 1.0256410256410258rem;
			top: 0 !important;
			left: 0 !important;
		}
		.tk .value{
			height: 100%;
			display: flex;
			align-items:center;
			margin-left: 0.5rem;
			margin-right: 0.5rem;
		}
		.tk li img{
			width: 5.47008547008547rem;
			height: 10.5982905982906rem;
			position:relative;
			top: -2.5641025641025643rem;
			left: -2.5641025641025643rem;
		}
		.tk li span{
			margin-left:0.8547008547008548rem;
		}
		.tk button{
			width: 5.0427350427350435rem;
			height: 4.700854700854701rem;
			z-index:144;
			border:none;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius:0.6837606837606838rem;
			margin-top:0.5128205128205129rem;
			outline: none;
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
			-webkit-focus-ring-color: rgba(0, 0, 0, 0);
		}
		.tk button img{
			width: 2.3504273504273505rem;
			height: 2.094017094017094rem;
		}
    </style>
</head>

<body>
	<div class="tk">
		<ul>
			<!--<li><img src="./static/dt_03.gif" onclick="setTitle('网约房')" />网约房</li>
			<li><img src="./static/dt_03.gif" onclick="setTitle('仓库')" />仓库</li>
			<li><img src="./static/dt_03.gif" onclick="setTitle('办公')" />办公</li>
			<li><img src="./static/dt_03.gif" onclick="setTitle('住宅')" />住宅</li>-->
		</ul>
		<button type="button" onclick="toggleShow()"><img src="./img/a_r.png" /></button>
	</div>
	<script src="js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script>
		document.addEventListener('plusready', function(){
			
		});
		
		function getUrlParams(name) { // 不传name返回所有值，否则返回对应值
		    var url = window.location.search;
		    if (url.indexOf('?') == 1) { return false; }
		    url = url.substr(1);
		    url = url.split('&');
		    var name = name || '';
		    var nameres;
		    // 获取全部参数及其值
		    for(var i=0;i<url.length;i++) {
		        var info = url[i].split('=');
		        var obj = {};
		        obj[info[0]] = decodeURI(info[1]);
		        url[i] = obj;
		    }
		    // 如果传入一个参数名称，就匹配其值
		    if (name) {
		        for(var i=0;i<url.length;i++) {
		            for (const key in url[i]) {
		                if (key == name) {
		                    nameres = url[i][key];
		                }
		            }
		        }
		    } else {
		        nameres = url;
		    }
		    // 返回结果
		    return nameres;
		}
		
		var typeObj = getUrlParams('typeObj');
		typeObj = typeObj?JSON.parse(typeObj):{};
		var html='<li onclick="setTitle(\'默认\')"><img class="show-all" src="./img/home.png" /><div class="value">所有</div></li>';
		for(var key in typeObj){
			if(typeObj[key].mc.length>5){
			  typeObj[key].mc = typeObj[key].mc.substring(0,5)+'…';
			}
			html +='<li onclick="setTitle(\''+key+'\')"><div class="qiege"><img src="./img/mark_'+typeObj[key].type_img_id+'.png" /></div><div class="value">'+typeObj[key].mc+'</div></li>'
		}
		$('.tk ul').html(html);
		// $('#xq').html(getUrlParams('xq'));
		// $('#dz').html(getUrlParams('dz'));
		// $('#yt').html(getUrlParams('yt'));
		
		function setTitle(title){
			//利用iframe的onload事件刷新页面
			document.title = title; 
			var iframe = document.createElement('iframe');
			iframe.style.visibility = 'hidden'; 
			iframe.style.width = '1px'; 
			iframe.style.height = '1px'; 
			iframe.onload = function () { 
				setTimeout(function () {
					document.body.removeChild(iframe); 
				}, 0); 
			}; 
			document.body.appendChild(iframe);
		}
		
		toggleShow();
		function toggleShow(){
			var ul = $('.tk ul');
			if(ul.hasClass('hide')){
				$('.tk button img').attr('src','./img/a_r.png');
				ul.removeClass('hide');
			}else{
				$('.tk button img').attr('src','./img/a_l.png');
				ul.addClass('hide');
				//setTitle('默认');
			}
		}

    </script>
</body>

</html>